<template>
	<view>
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="backText" @tap="back()">返回</block>
			<block slot="content">我的位置</block>
		</cu-custom>
		<view class="map-content">
			<view>
				<picker @change="bindPickerChange" :value="currentAddress" :range="addressData" range-key="resName">
					<view class="address-select">
						<text>当前位置：</text> 
						{{ addressData[currentAddress].resName }} ({{ addressData[currentAddress].resTypeTitle }})</view>
				</picker>
				<view class="map-box">
					<map :scale="16" :latitude="addressData[currentAddress].resLat" :longitude="addressData[currentAddress].resLng" :markers="covers"></map>
				</view>
			</view>
			<button @click="openTxMap()" class="cu-btn line-blue margin lg shadow">详 细 地 图</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentAddress: 0,
				covers: [{
						latitude: '31.23958',
						longitude: '121.499763',
					}
				],
				addressData: [
					{
						resName: '我的位置',
						resLng: null,
						resLat: null,
						resTypeTitle: '居住地',
					},
					{
						resName: '东方明珠',
						resLng: '121.499763',
						resLat: '31.23958',
						resTypeTitle: '建筑',
					},
					{
						resName: '城隍庙',
						resLng: '121.492511',
						resLat: '31.225732',
						resTypeTitle: '古风建筑',
					}
				],
			}
		},
		onLoad() {
			this.getMyLocation()
		},
		methods: {
			getMyLocation() {
				let self = this
				uni.getLocation({
					type: 'wgs84',
					success: function (res) {
						console.log('当前位置：' , res);
						self.covers[0].longitude = self.addressData[0].resLng = res.longitude
						self.covers[0].latitude = self.addressData[0].resLat = res.latitude
						self.currentAddress = 0
					}
				});
			},
			bindPickerChange(e) {
				console.log('picker发送选择改变，携带值为：' + e.detail.value)
				this.currentAddress = e.detail.value
				this.covers[0].longitude = this.addressData[this.currentAddress].resLng
				this.covers[0].latitude = this.addressData[this.currentAddress].resLat
			},
			openTxMap() {
				let long = this.covers[0].longitude
				let lat = this.covers[0].latitude
				uni.openLocation({
				    latitude: lat,
				    longitude: long,
				    success: function () {
				        console.log('success');
				    }
				});
			},
		}
	}
</script>

<style lang="scss">
	.map-content {
		.address-select {
			display: inline-block;
			height: auto;
			padding: 2vh 0;
			text-align: center;
			margin: 30rpx 30rpx 0 30rpx;
			color: #2C405A;
			font-weight: bold;
			width: calc(100% - 60rpx);
			background-color: white;
			border-radius: 20rpx;
			box-shadow: 0rpx 0rpx 30rpx 10rpx rgba(0, 0, 0, 0.1);
			text {
				color: gray;
				font-weight: normal;
			}
		}
		.map-box {
			width: calc(100% - 60rpx);
			height: 35vh;
			box-sizing: border-box;
			margin: 30rpx 30rpx 0 30rpx;
			map {
				width: 100%;
				height: 100%;
				box-shadow: 0rpx 0rpx 30rpx 10rpx rgba(0, 0, 0, 0.1);
			}
		}
	}
</style>
